Musíte vědět dvě důležité věci: pořadí malování a kontext skládání. Pokud se podíváte na specifikaci, můžete zjistit, jak a kdy jsou prvky malovány.
Skládání kontextů vytvořených pozičními potomky se zápornými z-indexy (s výjimkou 0) v pořadí z-indexu (nejdříve nejnegativnější) a potom ve stromovém pořadí.
Všichni umístění, krytí nebo transformace potomků v pořadí stromů, které spadají do následujících kategorií:
Všichni umístění potomci s 'z-indexem: auto' nebo 'z-indexem: 0', ve stromovém pořadí.
Skládací kontexty tvořené umístěnými potomky s indexy z většími nebo rovnými 1 v pořadí z-indexu (nejdříve nejmenší) a potom ve stromovém pořadí.
Z toho je zřejmé, že nejdříve namalujeme prvky se záporným z-indexem v kroku (3), poté prvky se z-indexem rovným 0 v kroku (8) a nakonec ty, které mají kladný z-index v kroku (9) , což je logické. Můžeme také číst v jiné části specifikace:
Každé pole patří do jednoho kontextu skládání. Každé pole v daném kontextu skládání má celou úroveň zásobníku, což je jeho poloha na ose z vzhledem k ostatním políčkům ve stejném kontextu skládání. Krabice s vyšší úrovní zásobníku jsou vždy naformátovány před krabicemi s nižšími úrovněmi zásobníku. Krabice mohou mít záporné úrovně zásobníku. Krabice se stejnou úrovní stohu v kontextu skládání jsou skládány zdola nahoru podle pořadí stromů dokumentů.
Taky
Prvek, který vytváří místní kontext skládání, generuje pole, které má dvě úrovně zásobníku: jednu pro vytvářený kontext skládání (vždy 0) a jednu pro kontext skládání, do kterého patří (daný vlastností z-index).
Abyste pochopili, kdy bude každý prvek malován, musíte znát jeho kontext skládání a jeho úroveň zásobníku uvnitř tohoto kontextu skládání (definovaný z-indexem). Musíte také vědět, zda tento prvek vytváří kontext skládání. Toto je složitá část, protože nastavení z-indexu to udělá:
Pro umístěný rámeček určuje vlastnost z-index:
Úroveň zásobníku pole v aktuálním kontextu skládání.
Zda pole vytváří kontext skládání
Hodnoty mají následující význam:

Toto celé číslo je úroveň zásobníku vygenerovaného pole v aktuálním kontextu skládání. Krabice také vytváří nový kontext skládání.
auto
Úroveň zásobníku vygenerovaného pole v aktuálním kontextu skládání je 0. Pole nevytváří nový kontext skládání, pokud není kořenovým prvkem.
Nyní máme všechny informace, abychom každému případu lépe porozuměli. Pokud má nadřazený prvek hodnotu z-indexu něčeho jiného než auto, pak vytvoří kontext skládání, takže podřízený prvek bude malován uvnitř bez ohledu na to, jaký je jejich z-index (negativní nebo pozitivní). Z-index podřízeného prvku nám jednoduše řekne pořadí malování uvnitř nadřazeného prvku (to pokrývá váš druhý bod).
Nyní, pokud má pouze podřízený prvek kladný z-index a nenastavíme nic na nadřazený prvek, pak s ohledem na pořadí malování bude dítě vymalováno později (v kroku (9)) a nadřazené v kroku (8). Jediným logickým způsobem, jak namalovat nadřazeného, ​​je zvětšit z-index, ale tím se dostaneme do předchozího případu, kdy nadřazený vytvoří stohovací kontext a podřízený prvek do něj bude patřit.
Při nastavování kladného z-indexu na dítě neexistuje způsob, jak mít nadřazený prvek nad podřízeným prvkem. Neexistuje ani žádný způsob, jak mít rodiče nad dítětem, pokud nastavíme z-index na nadřazený prvek odlišný od auto (pozitivní nebo negativní).
Jediným případem, kdy můžeme mít dítě pod jeho rodičem, je nastavení záporného z-indexu na podřízený prvek a udržení rodiče na z-index: auto, takže tento nevytvoří kontext stohování a podle pořadí malování dítě bude namalováno jako první.
Kromě z-indexu existují další vlastnosti, které vytvářejí kontext skládání. V případě, že se setkáte s očekávanou objednávkou stohování, musíte také zvážit tyto vlastnosti, abyste zjistili, zda je vytvořen kontext skládání.
Z výše uvedeného můžeme vyvodit několik důležitých skutečností:
Kontexty stohování mohou být obsaženy v jiných kontextech stohování a společně vytvářejí hierarchii kontextů stohování.
Každý kontext skládání je zcela nezávislý na svých sourozencích: při zpracování skládání se berou v úvahu pouze potomci.
Každý kontext skládání je samostatný: po naskládání obsahu prvku je celý prvek považován v pořadí skládání nadřazeného kontextu skládání. ref
1: Existuje několik hackerských způsobů, pokud vezmeme v úvahu použití 3D transformace.
Příklad s prvkem procházejícím pod jeho nadřazeným prvkem, i když má tento zadán z-index.
.box {
pozice: relativní;
z-index: 0;
výška: 80px;
pozadí: modrá;
styl transformace: uchovat-3d; /* Toto je důležité */
}
.box> div {
okraj: 0 50px;
výška: 100px;
pozadí: červená;
z-index: -1; / * to nic neudělá * /
transformace: translateZ (-1px); / * to udělá kouzlo* /
}

 

Další příklad, kdy můžeme umístit prvek mezi dva prvky v jiném kontextu skládání:
.box {
pozice: relativní;
z-index: 0;
výška: 80px;
pozadí: modrá;
}
.box> div {
okraj: 0 50px;
výška: 100px;
pozadí: červená;
z-index: 5;
transformace: translateZ (2px);
}
.vně {
výška: 50px;
pozadí: zelená;
okraj: -10px 40px;
transformace: translateZ (1px);
}
tělo {
styl transformace: uchovat-3d;
}

 

 
Můžeme také mít nějaké šílené pořadí stohování, jako je níže:
.box {
šířka: 100px;
výška: 100px;
pozice: absolutní;
}
tělo {
styl transformace: uchovat-3d;
}
 
 
 
 
Měli bychom si uvědomit, že používání takového hacku může mít nějaký vedlejší účinek vzhledem k tomu, že transformační styl, perspektiva a transformace ovlivní position: absolute / fixed element. Související: Filtr CSS na nadřazené položce rozbije polohu dítěte
10
|
Dobrým způsobem, jak o tom přemýšlet, je, že každý rodič obsahuje svůj vlastní kontext skládání. Sourozenecké prvky sdílejí pořadí skládání rodičů a mohou se proto navzájem překrývat.
Podřízený prvek VŽDY získává kontext skládání na základě svého nadřazeného prvku. Proto je potřeba záporné hodnoty z-indexu, aby se dítě posunulo „za“ jeho nadřazený (0) stohovací kontext.
Jediným způsobem, jak odebrat prvek z kontextu jeho rodiče, je použití position: fixed, protože to v podstatě nutí použít okno pro kontext.
1
|
Dokumentace k Mozille říká
Vlastnost CSS z-indexu nastavuje pořadí z umístěného prvku a jeho potomků nebo flex položek.
Zde je další logika z jiného článku StackOverflow týkající se dětí vs. potomků.
2
|
Jak mohu tomuto chování porozumět logikou?
Pro mě je těžké logicky pochopit váš problém. Rodič obsahuje své děti. Misku lze zakrýt jinou miskou. Polévku však nemůžete zakrýt miskou, dokud ji nevyložíte z mísy.
z-Index nastavuje pořadí překrývajících se prvků. Rodič nemůže překrývat své dítě.
To je naprosto logické.
|
Tvoje odpověď
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("snippets", function () {
StackExchange.snippets.init ();
});
});
}, „code-snippets“);
StackExchange.ready (funkce () {
var channelOptions = {
tagy: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Je nutné po úryvcích vypálit editor, pokud jsou úryvky povoleny
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("snippets", function () {
createEditor ();
});
}
else {
createEditor ();
}
});
funkce createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46,2665 7,94324 47,1084 7,58816C47.4091 7,46349 47,7169 7,36433 48,0099 7,26993C48,9099 6,97977 49,672 6,73443 49,672 5,93063C49,672 5,22043 48,9832 4,61182 48,1414 4,61182C47,4335 4,61182 46,7256 4,91628 4,91650 4,91650 4,416 164 4,45 43,1481 6,59048V11.9512C43.1481 13,2535 43,6264 13,8962 44,6595 13,8962C45,6924 13,8962 46,1709 13,2535 46,1709 11,9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10,1419432,144,14,144,14,144,44 41,5985 12,6954 41,5985 10,1419V6,59049C41,5985 5,28821 41,1394 4,66232 40,1061 4,66232C39,0732 4,66232 38,5948 5,2881 38,5948 6,59049V9,60062C38,5948 10,8521 38,2696 11,5455 37,0451 11,5455C35,535 521 35,4954 960062V6.59049C35.4954 5,28821 35,0173 4,66232 34,0034 4,66232C32,9703 4,6632 32,492 5,28821 32,492 6,59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ " = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.49.549.549.549.549.54.4550 0,1369 4,56087 21,0134 6,57349 21,0134 9,27932 C21.0134 119852 23,003 13,913 25,3754 13,913C26,5612 13,913 27,4607 13,4902 28,1109 12,6616C28,1109 12,7229 28,1161 12,779928,121 12,8346C28.1256 12,884 28,1301 12,9342 28,1301 12,983 C28.1301 14,4373 27,2502 15,2321 25,777 15,2321C24,8349 15,2321 24,1352 14,9821 23,5661 14,7787 233,776 14,639 21,222 212 422 212 422 212 422 212 422 212 422 212 422 212 422 212 422 212 422 21 422 ZM24.1317 9.27932C24.1317 7,94324 24,9928 7,09766 26,1024 7,09766C27,2199 7,09766 28,0918 7,94324 28,0918 9,27932C28.0918 10,6321 27,2311 11,5116 26,1024 11,5116C24,99737 11,5116 24,1317 10,6491 24,1317 8045 11,9512C16.8045 13,2535 17,2637 13,8962 18,2965 13,8962C19,3298 13,8962 19,8079 13,2535 19,8079 11,9512V8.12928C19.8079 5,82936 18,4879 4,62866 16,4027 4,62866C15.1594 4,62866 14,279 6,983,753 7,94666 5,5079C7,58314 4,9328 7,10506 4,66232 6,52203 4,66232C5,47873 4,66232 5 00066 5,2881 5 00066 6,59049 V11,9512C5.00066 13,2535 5,47873 13,8962 6,51203 13,8962C7,54479 13,8962 8,0232 13,2535 8,0232 11,9512V8,90741C8,0232 7,58817 8,44431 6,91179 9,53458 6,91179C10,5104 6,91179 10,893 7,58817 10,893 8,94108V11,9512C10,893 13,2535 11,3711 13,8962 12,4044 13,87,13 13,15 13,135 13,13 13,13 13,15 6,91179C16.4027 6,91179 16,8045 7,58817 16,8045 8,94108V11,9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6,59049C3.31675 5,281 2183866 4,66232 1,82471 4,66632C0,791758 4,66232 0,313354 5,182,3535,133,3535 13,3535 13,8962 1,82471 13,8962C2.85798 13,8962 3,31675 13,2535 3,31675 11,9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0,400291C0,843612 0,400291 0 1,1159 0 1,98861C0 2,87869 0,8228467,969 2,677,97 2,677,97 2,677,97 2,677,97 2,677,97 2,62,87 3,57 1.98861C3.7234 1,1159 2,90056 0,400291 1,87209 0,400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Uživatelské příspěvky jsou licencovány pod \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (obsahové zásady) \ u003c / a \ u003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
, okamžitěShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Děkujeme, že jste přispěli odpovědí na Stack Overflow!
Nezapomeňte na otázku odpovědět. Uveďte podrobnosti a sdílejte svůj výzkum!
Ale vyhnout se ...
Žádáme o pomoc, vysvětlení nebo reagujeme na jiné odpovědi.
Dělat prohlášení na základě názoru; podpořte je referencemi nebo osobními zkušenostmi.
Další informace najdete v našich tipech na psaní skvělých odpovědí.
Koncept uložen
Koncept zahozen
Zaregistrujte se nebo se přihlaste
StackExchange.ready (funkce () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Zaregistrujte se pomocí Google
Zaregistrujte se pomocí Facebooku
Zaregistrujte se pomocí e-mailu a hesla
Předložit
Zveřejněte jako host
název
E-mailem
Povinné, ale nikdy zobrazené
StackExchange.ready (
funkce () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- child% 23new-answer ',' question_page ');
}
);
Zveřejněte jako host
název
E-mailem
Povinné, ale nikdy zobrazené
Zveřejněte svou odpověď
Vyřadit
Kliknutím na „Odeslat odpověď“ vyjadřujete souhlas s našimi podmínkami služby, zásadami ochrany osobních údajů a zásadami používání souborů cookie
Toto není odpověď, kterou hledáte? Přečtěte si další otázky týkající se značek css css-position z-index nebo položte vlastní otázku.